<template>
  <section>
    <div class="max-w-7xl mx-auto min-h-screen flex flex-col items-center justify-center">
      <div class="text-center text-3xl font-bold leading-tight sm:text-4xl md:text-5xl lg:text-6xl">
        <h1 class="bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text text-foreground">hello, 我是六月</h1>
      </div>
      <p class="text-md mx-auto max-w-2xl sm:text-md text-muted-foreground text-balance mt-6">一个热爱前端开发的程序猿</p>
      <div class="mt-10 flex gap-2 items-center justify-center ">
        <button class="bg-primary text-primary-foreground rounded-lg border border-border">
          <NuxtLink class="block px-4 py-2" to="/blogs">
            最新文章
          </NuxtLink>
      </button>
      <button class="bg-input/70 text-input-foreground rounded-lg border border-border">
        <NuxtLink class="block px-4 py-2" to="/abouts">
          关于
        </NuxtLink>
      </button>
      </div>
    </div>
  </section>
  <section>
    <div class="max-w-7xl mx-auto min-h-screen flex flex-col items-center justify-center">
      <div class="text-center text-3xl font-bold leading-tight sm:text-4xl md:text-5xl lg:text-6xl">
        <h1 class="bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text text-foreground">生活记录</h1>
      </div>
      <p class="text-md mx-auto max-w-2xl sm:text-md text-muted-foreground text-balance mt-6">
        一些生活记录
      </p>
      <div class="mt-10 flex gap-2 h-[200px]">
        <img src="@/assets/images/p1.jpg" alt="" class="w-1/3 object-contain">
        <img src="@/assets/images/p2.jpg" alt="" class="w-1/3 object-contain">
        <img src="@/assets/images/p3.jpg" alt="" class="w-1/3 object-contain">
        <img src="@/assets/images/p4.jpg" alt="" class="w-1/3 object-contain">
        <img src="@/assets/images/p5.jpg" alt="" class="w-1/3 object-contain">
        <img src="@/assets/images/p6.jpg" alt="" class="w-1/3 object-contain">
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

</script>

<style>

</style>